import {
  Tabs,
  TabList,
  Tab,
  TabPanel,
  TabPanels,
  Box,
  Image
} from '@chakra-ui/react';
import SignUp from './SignUp';
import SignIn from './SignIn';

export default function Form() {
  return (
    <Box bgColor="white" p={50} w="400px" boxShadow="lg" borderRadius="lg" boxShadow="0 0 8px rgb(0 0 0 / 10%)" m="30px auto">
      <Tabs isFitted>
        <TabList border="none" px="60px" color="#969696" fontSize="18px" fontWeight={400}>
          <Tab 
            _focus={{boxShadow:"none"}} 
            _selected={{color: "#ea6f5a", borderBottom: "2px solid #ea6f5a", fontWeight: 700 }}
            _hover={{borderBottom: "2px solid #ea6f5a"}}
            _active={{bg: "none"}}
            w="56px"
            mr="15px"
          >
          登录</Tab>
          <b>·</b>
          <Tab 
            _focus={{boxShadow:"none"}} 
            _selected={{color: "#ea6f5a", borderBottom: "2px solid #ea6f5a", fontWeight: 700}}
            _active={{bg: "none"}}
            w="56px"
            ml="15px"
          >
          注册</Tab>
        </TabList>
        <TabPanels>
          <TabPanel pt="50px">
            <SignIn/>
          </TabPanel>
          <TabPanel pt="50px">
            <SignUp/>
          </TabPanel>
        </TabPanels>
      </Tabs>
    </Box>
  );
}